import { ReactNode, useState } from 'react';
import { createContext } from 'use-context-selector';
import { useEventEmitter, useRequest } from 'ahooks';
import { EventEmitter } from 'ahooks/lib/useEventEmitter';
import { ApiDatasetEvent } from '@/types/api';

type ApiManageContextType = {
  event$: EventEmitter<ApiDatasetEvent> | null;
  total: number;
  setTotal: (total: number) => void;
  page: number;
  setPage: (page: number) => void;
  pageSize: number;
  setPageSize: (pageSize: number) => void;
  deleteModalVisible: boolean;
  setDeleteModalVisible: (visible: boolean) => void;
  newApiModalVisible: boolean;
  setNewApiModalVisible: (visible: boolean) => void;
  newDatasetModalVisible: boolean,
  setNewDatasetModalVisible: (visible: boolean) => void,
};

export const ApiManageContext = createContext<ApiManageContextType>({
  event$: null,
  total: 0,
  setTotal: () => { },
  page: 1,
  setPage: () => { },
  pageSize: 10,
  setPageSize: () => { },
  deleteModalVisible: false,
  setDeleteModalVisible: () => { },
  newApiModalVisible: false,
  setNewApiModalVisible: () => { },
  newDatasetModalVisible: false,
  setNewDatasetModalVisible: () => { },
});

const ApiManageContextProvider = ({ children }: { children: ReactNode }) => {
  const event$ = useEventEmitter<ApiDatasetEvent>();
  const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
  const [newApiModalVisible, setNewApiModalVisible] = useState<boolean>(false);
  const [newDatasetModalVisible, setNewDatasetModalVisible] = useState<boolean>(false);


  const contextValue: ApiManageContextType = {
    event$,
    total: 0,
    page: 1,
    pageSize: 10,
    setTotal: () => { },
    setPage: () => { },
    setPageSize: () => { },
    deleteModalVisible,
    setDeleteModalVisible,
    newApiModalVisible,
    setNewApiModalVisible,
    newDatasetModalVisible,
    setNewDatasetModalVisible,
  };


  return <ApiManageContext.Provider value={contextValue}>{children}</ApiManageContext.Provider>;
};

export default ApiManageContextProvider;
